<template>
    <i-link :style="'width:'+ menuSideWidth + 'px'" class="i-layout-header-logo" :class="{ 'i-layout-header-logo-stick': !isMobile }" to="/">
        <img  style="height: 60%" v-if="menuCollapse">
        <img  v-else>
    </i-link>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        name: 'iHeaderLogo',
        props:{
            width: {
                type: [Number, String],
                default: 200
            },
        },
        computed: {
            ...mapState('system/layout', [
                'isMobile',
                'headerTheme',
                'menuCollapse'
            ]),
            menuSideWidth () {
                return this.menuCollapse ? 80 : 200;
            }
        },
        data () {
            return {
                logo: require('@/assets/system/img/logo.png'),
                logoSmall: require('@/assets/system/img/logo-small.png')
            };
        },
        mounted () {

        },
        methods: {

        }
    }
</script>
